*{
  margin: 0;
  padding: 0;
}

body{
  background: snow;
}

#range{
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0px;
  width: 100%;
}

#ball{
  display: flex;
  flex-direction: column;
  border: 4px solid saddlebrown;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: red;
  position: sticky;
  bottom: 0;
  animation-name: scroll-ball;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /*animation-fill-mode: forwards;*/
  /*  animation-play-state: paused;*/
}

#ball>span{
  width: 55px;
  height: 55px;
  border-radius: 90px;
  color: white;
  font-weight: bolder;
  line-height: 55px;
  text-align: center;
  font-size: 40px;
}

@keyframes scroll-ball{
  0%{
    background: red;
    left: 0%;
    transform: rotate(0);
  }
  25%{
    background: green;
    left: 50%;
    transform: rotate(360deg);
  }
  50%{
    background: blue;
    left: calc(100% - 60px);
    transform: rotate(720deg);
  }
  75%{
    background: yellow;
    left: 50%;
    transform: rotate(360deg);
  }
  100%{
    background: black;
    left: 0%;
    transform: rotate(0);
  }
}

